<template>
  <div class="news_content">
      <!-- 广告位 -->
       <a  class="newsImgs" v-if="parseInt(listlayout)==-1" :href="tagetLink" >
                <p class="text" style="height: auto;" >{{title}}</p>
                <div class="" >
                        <img alt="图片异常" width="100%" v-lazy="coverImg">
                </div>
                <p class="bottom" >
                    {{source}}
                    <span class="toutiao" v-if="toutiao">头条</span>
                </p>
        </a>
        <!-- 纯文字位 -->
        <router-link   class="newsImgs" v-else-if="coverImg==''" :to="'/newsDetails/'+newsId">
            <p  class="text">{{title}}</p>
            <p class="bottom" >
                {{source}}<span class="dian">·</span>{{time | datetime}}
                <span class="toutiao" v-if="toutiao">头条</span>
            </p>
        </router-link>

 

    <div  @click="link" v-else>
    <!-- 单图位 -->
    <div class="newsImg" v-if="parseInt(listlayout)==0">
        <div class="left">
            <p  class="text">{{title}}</p>
            <p class="bottom" >
                {{source}}<span class="dian">·</span>{{time | datetime}}
            </p>
            <span class="toutiao" v-if="toutiao">头条</span>
        </div>
        <div class="right">
            <img alt="图片异常" class="img"  v-lazy="coverImg" >
        </div>
    </div>
    <!-- 多图位 -->
    <div class="newsImgs"  v-else-if="parseInt(listlayout)==1">
                <p  class="text" style="height: auto">{{title}}</p>
                <div class="imgs">
                        <img alt="图片异常" width="32%" v-lazy="coverImg">
                        <img alt="图片异常" width="32%" v-lazy="coverImg2">
                        <img alt="图片异常" width="32%" v-lazy="coverImg3">
                </div>
                <p class="bottom" >
                    {{source}}<span class="dian">·</span>{{time | datetime}}
                    <span class="toutiao" v-if="toutiao">头条</span>
                </p>
    </div>
    <!-- 视频位 -->
    <div  class="newsImgs" v-else-if="parseInt(listlayout)==2">
                <p  class="text" style="height: auto">{{title}}</p>
                <div class="video-box" >
                        <img alt="图片异常" width="100%" v-lazy="coverImg">
                        <span class="play-video"><img src="@/assets/images/home_video.png"/></span>
                </div>
                <p class="bottom" >
                    {{source}}<span class="dian">·</span>{{time | datetime}}
                    <span class="toutiao" v-if="toutiao">头条</span>
                </p>
    </div>
    <!-- 其余都以单图形式展示 -->
    <div class="newsImg" v-else>
        <div class="left">
            <p  class="text">{{title}}</p>
            <p class="bottom" >
                {{source}}<span class="dian">·</span>{{time | datetime}}
            </p>
            <span class="toutiao" v-if="toutiao">头条</span>
        </div>
        <div class="right">
            <img alt="图片异常" class="img" v-lazy="coverImg" >
        </div>
    </div>
    </div>
</div>
  
</template>

<script>
import Vue from 'vue';    
import { Lazyload, Loading  } from 'vant';
Vue.use(Lazyload,{
    loading:require('@/assets/images/default_news@2x.png'),
    error:require('@/assets/images/default_news@2x.png'),
});
export default {
    props: ['title','time','toutiao','source','newsId','type','listlayout','coverImg','coverImg2','coverImg3','tagetLink'],
    components: {
        [Loading.name]: Loading,
    },
    data(){
        return {
            imageApi:this.GLOBAL.imageApi,
        }
    },
    methods:{
        link(){
            if (this.type=='link') {
                window.location.href=this.tagetLink
            }else {
                this.$router.push({ name: 'newsDetails', params: { id: this.newsId }})
            }
        }
    },
};
</script>

<style scoped>
.news_content {
    padding: 0 1rem;
}    
.newsImg {
    padding: 0.625rem 0;
    border-bottom: 1px solid  #F1F1F1;
    height: 5rem;
    clear: both;
}
.newsImg:active, .newsImgs:active {
    background: #E8E8E8;
}
.newsImg .left {
    width: 13.5rem;
    height: 100%;
    color: #333333;
    position: relative;
    float: left;
}
.newsImg .right {
    float: right;
    width: 7.5rem;
    height: 100%;
}
.newsImg .img {
    clear: both;
    width: 100%;
    max-height: 80px;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.newsImg .text,.newsImgs .text {
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    /* 注：火狐和ie不兼容-webkit-line-clamp  加height来限制 */
    -webkit-line-clamp:2; 
    height: 44px;
}
.newsImg  .bottom {
    position: absolute;
    bottom: 0;
    font-size: 13px;
    color: #999999;
}
.newsImg .bottom .dian,.newsImgs .bottom .dian {
    margin: 0 7px 0;
}
.newsImg .toutiao,.newsImgs  .toutiao  {
    position: absolute;
    right: 10px;
    bottom: 0;
    border: 1px solid #FF000A;
    border-radius: 10px;
    padding: 0 0.312rem 0 0.312rem;
    font-size: 10px;
    color: #FF000A;
}
.newsImgs {
    display:block;
    padding: 0.625rem 0;
    border-bottom: 1px solid  #F1F1F1;
}
.newsImgs  .bottom {
    font-size: 13px;
    color: #999999;
    margin-top: 5px;
    position: relative;
}
.newsImgs  .text {
    color: #333333;
    margin-bottom: 10px;
}
.newsImgs  .imgs {
    display: flex;
    justify-content: space-around;
}
.newsImgs  .imgs img {
    height: 100%;
}

.video-box {
    position: relative;
}
.video-box .play-video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%)  translateY(-50%);
}
</style>
